interface Pos{
    x:number;
    y:number;
}

abstract class Node {
    topLeftX: number;
    topLeftY: number;
    w:number;
    h:number
    constructor(){
        this.topLeftX = 0
        this.topLeftY = 0
        this.w = 0
        this.h = 0
    }
    getClientOffset() {
        return {
            TopLeft: {
                x: this.topLeftX,
                y: this.topLeftY
            },
            TopRight: {
                x: this.topLeftX + this.w,
                y: this.topLeftY
            },
            BottomLeft: {
                x: this.topLeftX,
                y: this.topLeftY + this.h
            },
            BottomRight: {
                x: this.topLeftX + this.w,
                y: this.topLeftY + this.h
            }
        }
    }
    getCenterOffset() {
        return {
            TopCenter: {
                x: this.topLeftX + this.w / 2,
                y: this.topLeftY
            },
            BottomCenter: {
                x: this.topLeftX + this.w / 2,
                y: this.topLeftY + this.h
            },
            LeftCenter: {
                x: this.topLeftX,
                y: this.topLeftY + this.h / 2
            },
            RightCenter: {
                x: this.topLeftX + this.w,
                y: this.topLeftY + this.h / 2
            },
            Center: {
                x: this.topLeftX + this.w / 2,
                y: this.topLeftY + this.h / 2
            }
        }
    }
}


export class Circle extends Node {
    topLeftX: number;
    topLeftY: number;
    w: number;
    h: number
    constructor() {
        super()
        this.topLeftX = 0
        this.topLeftY = 0
        this.w = 0
        this.h = 0
    }
    create(ctx: CanvasRenderingContext2D, topLeftX: number, topLeftY: number, size: number,) {
        this.topLeftX = topLeftX
        this.topLeftY = topLeftY
        this.w = size
        this.h = size
        const radius = this.w / 2
        const circlePosx = this.topLeftX + radius
        const circlePosy = this.topLeftY + radius
        ctx.beginPath();
        ctx.arc(circlePosx, circlePosy, radius, 0, Math.PI * 2);
        ctx.stroke();
        return this
    }
}

export class ImgRegion extends Node{
    topLeftX: number;
    topLeftY: number;
    size: number;
    w:number;
    h:number
    constructor() {
        super()
        this.topLeftX = 0
        this.topLeftY = 0
        this.size = 0
        this.w = 0
        this.h = 0
    }
    create(ctx: CanvasRenderingContext2D, x: number, y: number,w:number,h:number, src: string) {
        this.w = w
        this.h = h
        this.topLeftX = x
        this.topLeftY = y
        const img = new Image()
        img.src = src
        img.onload = function(){
            // console.log(img);
            
            let scale;
            if ((img.width / w) > (img.height / h)) {
                // 图片宽度影响缩放
                scale = w / img.width
            } else {
                // 图片高度影响缩放
                scale = h / img.height;
            }
            
            const scaledWidth = img.width * scale;
            const scaledHeight = img.height * scale;

            if (scaledWidth < w) {
                x = x + (w - scaledWidth) / 2
            } else if (scaledHeight < h) {
                y = y + (h - scaledHeight) / 2
            }
            ctx.drawImage(img, 0, 0, img.width, img.height, x, y, scaledWidth, scaledHeight);
        }
        return this
    }
}

export class Text extends Node{
    create(ctx: CanvasRenderingContext2D,color:string,fontSize:number,fontFamily:string, x: number,y: number, maxWidth:number,  text: string){
        let textArr:string[] = []
        const orginX = x
        ctx.fillStyle = color
        ctx.font = `${fontSize}px ${fontFamily}`

        if (text.includes('\n')) {
            textArr = text.split('\n');
        } else {
            textArr = [text];
        }

        textArr.forEach((item, index) => {
            const width = ctx.measureText(item).width
            if(width <= maxWidth){
                x = orginX + (maxWidth - width) / 2
                ctx.fillText(item, x, y + index * fontSize, maxWidth)
            }else {
                x = orginX - ( width - maxWidth) / 2
                ctx.fillText(item, x, y + index * fontSize)
            }
        });

        

        return this
    }   
}

// export class Node{
//     type:string;
//     topLeftX:number;
//     topLeftY:number;
//     size:number;
//     w:number;
//     h:number;

//     constructor(type:string){
//         this.type = type
//         this.topLeftX = 0
//         this.topLeftY = 0
//         this.size = 0
//         this.w = 0
//         this.h = 0

//         switch (type) {
//             case 'circle':
//                 this.createCircle = this.createCircle.bind(this)
//                 break;
//             case 'img':
//                 this.createImgToRegion = this.createImgToRegion.bind(this)
//                 break;
//             default:
//                 break;
//         }
//     }
//     createCircle(ctx: CanvasRenderingContext2D, topLeftX: number, topLeftY: number, size: number, ){
//         this.topLeftX = topLeftX
//         this.topLeftY = topLeftY
//         this.size = size
//         const radius = this.size / 2
//         const circlePosx = this.topLeftX + radius
//         const circlePosy = this.topLeftY + radius
//         ctx.beginPath();
//         ctx.arc(circlePosx, circlePosy, radius, 0, Math.PI * 2);
//         ctx.stroke();
//         return this
//     }
//     createImgToRegion(ctx:CanvasRenderingContext2D,x:number,y:number,src:string){
//         const that = this
//         const img = new Image()
//         img.src = src
//         img.onload =  () =>{
//             let scale;
//             if ((img.width / that.size) > (img.height / that.size)) {
//                 // 图片宽度影响缩放
//                 scale = that.size / img.width
//             } else {
//                 // 图片高度影响缩放
//                 scale = that.size / img.height;
//             }

//             const scaledWidth = img.width * scale;
//             const scaledHeight = img.height * scale;

//             if (scaledWidth < that.size) {
//                 x = x + (that.size - scaledWidth) / 2
//             } else if (scaledHeight < that.size) {
//                 y = y + (that.size - scaledHeight) / 2
//             }
//             that.w = scaledWidth
//             that.h = scaledHeight
//             that.topLeftX = x
//             that.topLeftY = y

//             ctx.drawImage(img, 0, 0, img.width, img.height, x, y, scaledWidth, scaledHeight);
//         }
//     }
// }